<template>
	<view>

		<view class="tab-bar" :class="tabIndex==1?'color-1':'color-2'">
			<view @click="changeTab(1)" :class="tabIndex==1?'tab-bar-item tab-bar-item-active':'tab-bar-item'">车辆详情
			</view>
			<view @click="changeTab(2)" :class="tabIndex==2?'tab-bar-item tab-bar-item-active':'tab-bar-item'">权益介绍
			</view>
			<view @click="changeTab(3)" :class="tabIndex==3?'tab-bar-item tab-bar-item-active':'tab-bar-item'">
				售后服务介绍
			</view>
		</view>

		<image class="img" v-if="tabIndex==1" mode='widthFix'
			:src="carDetail.imageMobileCardetail||'@appstatic/car/car_banner.jpg'" />
		<image class="img" v-if="tabIndex==2" mode='widthFix'
			:src="carDetail.imageMobileRights||'@appstatic/car/car_banner.jpg'" />
		<image class="img" v-if="tabIndex==3" mode='widthFix'
			:src="carDetail.imageMobileSaled||'@appstatic/car/car_banner.jpg'" />


	</view>
</template>

<script>
	export default {
		data() {
			return {

				tabIndex: 1,
				carDetail: null,
				titleName: '',
			}
		},
		onLoad(options) {

			this.carDetail = JSON.parse(options.carDetailJson);
			this.titleName = this.carDetail.modelName

			uni.setNavigationBarTitle({
				title: this.titleName
			})
		},
		methods: {
			changeTab: function(val) {
				this.tabIndex = val
			},
		}
	}
</script>

<style>
	.tab-bar {
		width: 100%;
		height: 44px;
		margin: 0 auto;
		z-index: 99;
		display: flex;
		color: #ffffff;
		justify-content: space-around;
		align-items: center;
	}

	.color-1 .tab-bar-item {
		font-size: 32rpx;
		color: #ADB0AE;
		position: relative;
	}

	.color-2 .tab-bar-item {
		font-size: 32rpx;
		color: #ADB0AE;
		position: relative;
	}

	.color-2 .tab-bar-item-active {
		font-weight: 600;
		font-size: 32rpx;
		color: #3D3A3A;
	}

	.color-1 .tab-bar-item-active {
		font-weight: 600;
		font-size: 32rpx;
		color: #3D3A3A;
	}
	
	.tab-bar-item-active::after {
		content: '';
		position: absolute;
		width: 40rpx;
		height: 4rpx;
		background-color: #ea5404;
		top: 48rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.img {
		width: 100%;
		height: calc(100vh - 44px - 44px);
		background-color: #ADB0AE
	}
</style>
